import React from 'react';
import { NavLink } from 'react-router-dom';
import { Menu } from 'antd';

// js
import MenuList from '@config/menuConfig.js';

// jsx
import Header from '@components/Header/Header.jsx';
import Footer from '@components/Footer/Footer.jsx';

import './admin.scss';

const SubMenu = Menu.SubMenu;

export default class Admin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      MenuUl: null
    }
  }


  componentWillMount() {
    let MenuUl = this.renderMenu(MenuList);
    this.setState({
      MenuUl
    });
  }

  componentDidMount() {
    // console.log(this.props)
  }

  renderMenu(data) {
    return data.map((item, index) => {
      if (item.children) {
        return (
          <SubMenu key={item.key} title={<span>{item.title}</span>}>
            {
              this.renderMenu(item.children)
            }
          </SubMenu>
        );
      }
      return <Menu.Item key={item.key}><NavLink to={item.key}>{item.title}</NavLink></Menu.Item>
    })
  }

  render() {
    return (
      <div className="container">
        <div className="left-nav-container">
          <div className="top-logo">
            <img src={require('@assets/images/logo-ant.svg')} alt="logo" className="logo-img"/>
            <span className="logo-title">MS</span>
          </div>
          <div className="menu">
            <Menu style={{ width: 240 }} mode="vertical" theme="dark">
              {this.state.MenuUl}
            </Menu>
          </div>
        </div>
        <div className="right-container">
          <Header />
          <div className="container-right-content">
            {this.props.children}
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}